<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Video.js Hotkeys</title>
		<link href="https://vjs.zencdn.net/8.17.4/video-js.css" rel="stylesheet" />
		<script src="https://vjs.zencdn.net/8.17.4/video.min.js"></script>
		<style>
			.video-js .vjs-menu-button-inline {
				width: 12em;
			}

			.vjs-menu-button-inline .vjs-menu {
				display: block;
				opacity: 1;
			}
		</style>
	</head>
	<body>
		<div>You can see the Video.js Hotkeys plugin in use below. Look at the source to see how to use it with your own videos.</div>

		<video id="video1" class="video-js vjs-default-skin vjs-big-play-centered" height="300" width="600" controls data-setup="{}">
			<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
			<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm" />
			<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg" />
			<p class="vjs-no-js">
				To view this video please enable JavaScript, and consider upgrading to a web browser that
				<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
			</p>
		</video>

		<script src="videojs.hotkeys.js"></script>
		<script>
			// initialize the plugin
			videojs("video1").ready(function () {
				this.hotkeys({
					volumeStep: 0.1,
					seekStep: 5,
					enableMute: true,
					enableFullscreen: true,
					enableNumbers: false,
					enableVolumeScroll: true,
					enableHoverScroll: true,
					captureDocumentHotkeys: true,
					documentHotkeysFocusElementFilter: (e) => e.tagName.toLowerCase() === "body",

					// Mimic VLC seek behavior, and default to 5.
					seekStep: function (e) {
						if (e.ctrlKey && e.altKey) {
							return 5 * 60;
						} else if (e.ctrlKey) {
							return 60;
						} else if (e.altKey) {
							return 10;
						} else {
							return 5;
						}
					},

					// Enhance existing simple hotkey with a complex hotkey
					fullscreenKey: function (e) {
						// fullscreen with the F key or Ctrl+Enter
						return e.which === 70 || (e.ctrlKey && e.which === 13);
					},

					// Custom Keys
					customKeys: {
						// Add new simple hotkey
						simpleKey: {
							key: function (e) {
								// Toggle something with S Key
								return e.which === 83;
							},
							handler: function (player, options, e) {
								// Example
								if (player.paused()) {
									player.play();
								} else {
									player.pause();
								}
							},
						},

						// Add new complex hotkey
						complexKey: {
							key: function (e) {
								// Toggle something with CTRL + D Key
								return e.ctrlKey && e.which === 68;
							},
							handler: function (player, options, event) {
								// Example
								if (options.enableMute) {
									player.muted(!player.muted());
								}
							},
						},

						// Override number keys example from https://github.com/ctd1500/videojs-hotkeys/pull/36
						numbersKey: {
							key: function (event) {
								// Override number keys
								return (event.which > 47 && event.which < 59) || (event.which > 95 && event.which < 106);
							},
							handler: function (player, options, event) {
								// Do not handle if enableModifiersForNumbers set to false and keys are Ctrl, Cmd or Alt
								if (options.enableModifiersForNumbers || !(event.metaKey || event.ctrlKey || event.altKey)) {
									var sub = 48;
									if (event.which > 95) {
										sub = 96;
									}
									var number = event.which - sub;
									player.currentTime(player.duration() * number * 0.1);
								}
							},
						},

						emptyHotkey: {
							// Empty
						},

						withoutKey: {
							handler: function (player, options, event) {
								console.log("withoutKey handler");
							},
						},

						withoutHandler: {
							key: function (e) {
								return true;
							},
						},

						malformedKey: {
							key: function () {
								console.log("I have a malformed customKey. The Key function must return a boolean.");
							},
							handler: function (player, options, event) {
								//Empty
							},
						},
					},
				});
			});
		</script>
	</body>
</html>
